<template>
  <div>
    <div style="margin-top: 80px">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }"><span class="text-article">首页</span></el-breadcrumb-item>
        <el-breadcrumb-item><span class="text-article">社团检索</span></el-breadcrumb-item>
        <el-breadcrumb-item><span class="text-article">{{ clubTypes[uid].name }}</span></el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--  搜索框-->
    <div style="width: 100%;">
      <div class="inputDeep">
        <el-input v-model="text" style="width: 98%;margin-top: 2%;"></el-input><span class="el-icon-search" @click="search()"></span>
      </div>
    </div>
<!--    侧边栏-->
    <div style="margin-left: 0;margin-top: -20px;">
      <el-row class="tac">
        <el-col :span="4" style="margin-top: 25px;">
          <el-menu
              :default-active="uid.toString()"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose">
            <div v-for="(clubType,index) in clubTypes">
              <el-menu-item :index="clubType.id.toString()" @click="toClubType(clubType.name,index)" >
                <span slot="title" v-if="clubType.name === ''">全部</span>
                <span slot="title" v-else>{{ clubType.name }}</span>
              </el-menu-item>
            </div>
          </el-menu>
        </el-col>

        <el-divider style="margin-left: 20%"></el-divider>
        <div style="float: left;margin-left: 20px;width: 80%">
         <router-view :key="key"></router-view>
        </div>
      </el-row>
    </div>
  </div>
</template>

<script>
import {clubTypeListApi, clubByNameApi,} from "@/api";

export default {
  name: "ClubA",
  data() {
    return {
      id: 0,
      clubs:[],
      clubTypes: [
        {id:0,name:''}
      ],
      club: {},
      uid: 0,
      type: '',
      text: "",
    }
  },
//  给路由一个随机数，每次变化让他检测到
computed:{
  key() {
    return this.$route.path+Math.random();
  }
},
  created() {
    clubTypeListApi().then((result)=>{
        this.clubTypes = result.data;
        this.clubTypes.unshift({
          id: 0,
          name: ''
        });
      });
      if (this.$route.query.uid!=null){
        this.uid = Number(this.$route.query.uid);
      }
  },

  methods: {
    search(){
      clubByNameApi({name: this.text}).then((result)=>{
          this.$router.push({
            path: '/clubA/clubB',
            query: {
              id: result.data.id,
              uid: this.uid
            }
          });
        });
    },

    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },

    toClubType(name,index){
      this.uid = index;
      this.$router.push({
        path: '/clubA',
        query: {
          uid: this.uid,
          type:name,
        }
      });
      // this.$router.go(0);
    }
  }
}
</script>

<style scoped>
.text-article{
  font-size: 1.5em;
}

.inputDeep>>>.el-input__inner{
  border: 0;
}
</style>
